<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
</head>

<body>
  <script src="./src/vue.js"></script>
  <!--基础例子-->
  <!-- <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage() }}"</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script> -->

  <!--计算属性缓存 vs 方法-->
  <!-- <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage() }}"</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      methods: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          console.info("reversedMessage")
          return this.message.split('').reverse().join('')
        }
      }
    })
    console.log(vm.reversedMessage) // => 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'
  </script> -->

  <!--计算属性 vs 侦听属性 -->
  <!--下面代码是命令式且重复的（不推荐）-->
  <!-- <div id="demo">{{ fullName }}</div>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })    
  </script> -->

  <!--计算属性的 setter-->
  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        reversedMessage: {
          get:function (){
            return this.message.split('').reverse().join('')
          },
          set:function(newValue){
              this.message=newValue
          }
        }
      }
    })
    console.log(vm.reversedMessage) // => 'olleH'
    vm.reversedMessage = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'
  </script>

</body>

</html>